import {defineComponent, ref} from 'vue';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import Sfz from "@/assets/images/sfz1.png";
import Sbk from "@/assets/images/sbk1.png";
import Yyjzk from "@/assets/images/jzk.png";
import Ybdzpz from "@/assets/images/dzybk.png";
import Jmjkk from "@/assets/images/jkk.png";
import Sldl from "@/assets/images/sldl1.png";
import { Steps } from '~/src/components/Steps';
import { KEEP_VIDEO_TOP } from '~/src/config';
import router from "@/router";
import {getDkType} from "@/api/his";
import {ICardInfo} from "@/api/typing";

export default defineComponent({
    setup() {
        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;

        // 定义登录方式base列表数据
        const baseTypes = [
            { id: 1,type:'1', name: '身份证', img: Sfz },
            { id: 2,type:'2',name: '社保卡', img: Sbk },
            { id: 3,type:'3',name: '医保电子凭证', img: Ybdzpz },
            { id: 4,type:'4',name: '医院就诊卡', img: Yyjzk },
            { id: 5,type:'5',name: '居民健康卡', img: Jmjkk },
            { id: 6,type:'6',name: '扫脸登录', img: Sldl },
        ];

        // 处理点击事件，跳转到第二个页面并传递name参数
        const handleClick = (item: ICardInfo) => {
            router.push({
                path: '/InputCard',
                query: { Card: JSON.stringify(item) }
            });
        };
        // 获取图片地址
        const getImgUrl = (item: ICardInfo) => {
            if (item.img) return item.img;
            const match = baseTypes.find(baseTypes => baseTypes.type === item.type);
            return match ? match.img : '';
        };

        const cardTypes = ref<ICardInfo[]>([]);
        //获取读卡类型
        async function getDkData() {
            const res = await getDkType({})
            cardTypes.value = res.rows!;
        }
        getDkData();

        return () => (<>
            <UserInfo></UserInfo>
            <Steps></Steps>
            <div class={Style.container_mar}>
                <div class={Style.container}>
                    <div class={Style.title}>选择登录方式</div>

                    <div class={Style.types}>
                        {cardTypes.value.map(item => (
                            <div
                                key={item.id}
                                class={Style.cardItem}
                                onClick={() => handleClick(item)}
                            >
                                <div style={{width: '100%', height: '100%' }}>
                                    <div class={Style.trapezoidMaskBackground}></div>
                                    {/* 卡片图片 */}
                                    <img class={Style.img} src={getImgUrl(item)}  />
                                    {/* 梯形遮罩（带居中文字）- 新增核心元素 */}
                                    <div class={Style.trapezoidMask}>
                                        <span class={Style.trapezoidText}>{item.name}</span>
                                    </div>
                                </div>
                                {/*无底座插入图片*/}
                                {/*{<div>*/}
                                {/*    {item.isImg && <div class={Style.trapezoidMaskBackground}></div>}*/}
                                {/*    <img class={[Style.img]} src={getImgUrl(item)}  />*/}
                                {/*    {item.isImg && <div class={Style.trapezoidMask}>*/}
                                {/*        <span class={Style.trapezoidText}>{item.name}</span>*/}
                                {/*    </div>}*/}
                                {/*</div>}*/}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </>);
    }
})
